<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleSmall"
    :before-close="cancel"
  >
    <el-form ref="addForm" class="dialog-form" :model="formData" label-width="80px">
      <el-radio-group v-model="formData.tempId" class="temp-list" size="small ">
        <el-radio v-for="item in tempList" :key="item.id" class="temp-item" :label="item.id" border>{{ item.name }}</el-radio>
      </el-radio-group>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>
<script>
import { updateIsFixed, getTempById } from '@/api/superviseBaseInfo/typeManage/organizationType'
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  name: 'BaseTemp',
  components: {
    DialogFooter
  },
  data() {
    return {
      // 套餐列表
      tempList: [],
      dialogTitle: '选择基础套餐', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        id: '',
        tempId: ''
      }
    }
  },
  methods: {
    handleAdd(id, tempList) {
      this.dialogVisible = true
      this.emptyAddForm()
      this.tempList = tempList
      this.formData.id = id
      this.handleDetail(id)
    },
    async handleDetail(id) {
      const { message } = await getTempById(id)
      if (message) {
        this.formData.tempId = message
      }
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async(valid) => {
        if (valid) {
          this.btnDisabled = true
          await updateIsFixed(this.formData)
          this.msgSuccess('保存成功')
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
    },
    // 表单重置
    emptyAddForm() {
      this.formData.id = ''
      this.formData.tempId = ''
      this.tempList = []
    }
  }
}
</script>

<style lang='scss' scoped>
.temp-list {
  .temp-item {
    margin-bottom: 10px;
    margin-right: 5px;
  }
  .temp-item:first-child {
    margin-left: 10px;
  }
}
</style>
